<template>
  <div :class="{ show: state.show }" class="header-search">
    <svg-icon
      class-name="search-icon"
      icon-class="search"
      @click.stop="click"
    />
    <el-select
      ref="headerSearchSelect"
      v-model="state.search"
      :remote-method="querySearch"
      filterable
      default-first-option
      remote
      placeholder="搜索"
      class="header-search-select"
      @change="change"
    >
      <el-option
        v-for="item in state.options"
        :key="item.url"
        :value="item"
        :label="item.name.join(' > ')"
      />
    </el-select>
  </div>
</template>

<script setup name="HeaderSearch">

import Fuse from "fuse.js";
import path from "path";

const { proxy } = getCurrentInstance()
const state = reactive({
  search: "",
  options: [],
  searchPool: [],
  show: false,
  fuse: undefined,
});
let routes = computed(() => {
  return proxy.$store.getters.permission_routes;
});
watch(
  () => routes.value,
  () => {
    state.searchPool = generateRoutes(routes.value);
  }
);
watch(
  () => state.searchPool,
  (list) => {
    initFuse(list);
  }
);
watch(
  () => state.show,
  (value) => {
    if (value) {
      document.body.addEventListener("click", close);
    } else {
      document.body.removeEventListener("click", close);
    }
  }
);
onMounted(() => {
  state.searchPool = generateRoutes(routes.value);
});
function click () {
  state.show = !state.show;
  if (state.show) {
    proxy.$refs.headerSearchSelect && proxy.$refs.headerSearchSelect.focus();
  }
};
function close () {
  proxy.$refs.headerSearchSelect && proxy.$refs.headerSearchSelect.blur();
  state.options = [];
  state.show = false;
};
function change (val) {
  proxy.$router.push(val.url);
  state.search = "";
  state.options = [];
  proxy.$nextTick(() => {
    state.show = false;
  });
};
function initFuse (list) {
  state.fuse = new Fuse(list, {
    shouldSort: true,
    threshold: 0.4,
    location: 0,
    distance: 100,
    maxPatternLength: 32,
    minMatchCharLength: 1,
    keys: [
      {
        name: "name",
        weight: 0.7,
      },
      {
        name: "url",
        weight: 0.3,
      },
    ],
  });
};
function generateRoutes (routes, basePath = "/", prefixTitle = []) {
  let res = [];

  for (const router of routes.value) {
    if (!router.url) {
      continue;
    }
    const data = {
      url: path.resolve(basePath, router.url),
      name: [...prefixTitle],
    };

    if (router.name) {
      data.name = [...data.name, router.name];

      if (router.redirect !== "noRedirect") {
        res.push(data);
      }
    }
    if (router.children) {
      const tempRoutes = generateRoutes(
        router.children,
        data.url,
        data.name
      );
      if (tempRoutes.length >= 1) {
        res = [...res, ...tempRoutes];
      }
    }
  }
  return res;
};
function querySearch (query) {
  if (query !== "") {
    state.options = state.fuse.search(query);
  } else {
    state.options = [];
  }
};
</script>

<style lang="scss" scoped>
.header-search {
  font-size: 0 !important;

  .search-icon {
    cursor: pointer;
    font-size: 18px;
    vertical-align: middle;
  }

  .header-search-select {
    font-size: 18px;
    transition: width 0.2s;
    width: 0;
    overflow: hidden;
    background: transparent;
    border-radius: 0;
    display: inline-block;
    vertical-align: middle;

    .el-input__inner {
      border-radius: 0;
      border: 0;
      padding-left: 0;
      padding-right: 0;
      box-shadow: none !important;
      //border-bottom: 1px solid #d9d9d9;
      vertical-align: middle;
      background: transparent;
      color: #fff;
    }
  }

  &.show {
    .header-search-select {
      width: 210px;
      margin-left: 10px;
    }
  }
}
</style>
